<template>
    <div class="">
        <div class="menu-box">

            <div class="user-info-box">
                <head-icon class="fl" :name="username" size="50px" font-size="16px" border="none"></head-icon>
                <div class="user-name-box">
                    <h1 class="name" v-text="username"></h1>
                    <p class="user-status" v-show="!showEdit"
                       :title="userStatus"
                       v-text="userStatus.length === 0 ? '请输入你的工作状态...' : userStatus" @click="editUserStatus()"></p>
                    <input class="user-status-input" ref="userStatusEdit" v-show="showEdit" v-model="userStatus"
                           placeholder="请输入你的工作状态..." @keyup.enter="editOver()" @blur="editOver()">
                </div>
            </div>
            <div class="menu-list">
                <ul>
                    <li class="text-center" :class="checkCurrentPath('resetPassword')" @click="goToPage('resetPassword')">
                        <menu-button content="修改密码"></menu-button>
                    </li>
                    <li class="text-center" :class="checkCurrentPath('login')" @click="goToPage('login')">
                        <menu-button content="账号关联"></menu-button>
                    </li>
                    <li class="text-center">
                        <menu-button content="隐私设置"></menu-button>
                    </li>
                    <li class="text-center">
                        <menu-button content="新消息通知"></menu-button>
                    </li>
                    <li class="text-center">
                        <menu-button content="清理缓存"></menu-button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content-box">
            <router-view class="content"></router-view>
        </div>
    </div>
</template>

<script>
  import MenuButton from '@/components/MenuButton.vue'
  import HeadIcon from '@/components/HeadIcon.vue'

  export default {
    name: "setting",
    components: {
      MenuButton,
      HeadIcon
    }, data() {
      return {
        username: '小花',
        userStatus: '',
        showEdit: false
      }
    }, methods: {
      checkCurrentPath: function (path) {
        console.log(this.$route.fullPath)
        if (this.$route.fullPath.indexOf(path) > -1) {
          return 'menu-active'
        } else {
          return ''
        }
      },
      editUserStatus: function () {
        this.showEdit = true
        setTimeout(function () {
          this.$refs.userStatusEdit.focus()
        }, 100)
      },
      editOver: function () {
        this.showEdit = false
      },
      goToPage: function (path) {
        if (this.$route.path !== '/setting/' + path) {
          this.$router.push({
            path: '/setting/' + path
          })
        }
      }
    }
  }
</script>
<style scoped lang="css" src="@/assets/css/content-menu.css"></style>

<style scoped>
    .user-info-box {
        height: 80px;
        border-bottom: solid #d9d9e1 1px;
        margin: 0 14px 20px;
        padding-top: 20px;
        box-sizing: border-box;
    }

    .content-box .content {
        padding: 30px 40px;
    }

    .user-info-box .user-name-box {
        margin-left: 12px;
        float: left;
    }

    .user-info-box .user-name-box .name {
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 16px;
    }

    .user-info-box .user-name-box .user-status {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #babac2;
        width: 150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }

    .user-info-box .user-name-box .user-status-input {
        height: 18px;
        width: 150px;
        line-height: 20px;
        font-size: 14px;
    }

</style>
